<template>
	<view class="tab-bar" :style="{ position: fixedPosition ? 'fixed' : 'static' }">
		<view class="tab-item" v-for="(item, index) in config" :key="index" @click="handleSwitch(item.pagePath, index)">
			<image class="tab-icon"
				:src=" props.path === item.pagePath ? (item.activeIcon || props.activeIcon) : item.icon" />
			<text class="tab-text"
				:style="{ color:  props.path === item.pagePath ? (item.activeColor || props.activeColor) : '#666' }">{{ item.text }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	const emits = defineEmits(['onTab']);
	const props = defineProps({
		config: {
			type: Array,
			default: () => []
		},
		path: {
			type: String,
			default: (props) => props.config[0]?.pagePath || ''
		},
		activeColor: {
			type: String,
			default: '#19C6AD'
		},
		activeIcon: {
			type: String,
			default: ''
		},
		fixedPosition: {
			type: Boolean,
			default: true
		}
	});
	const getCurrentPagePath = () => {
		const pages = getCurrentPages();
		return pages[pages.length - 1]?.route || '';
	};
	watch(() => props.currentPath, (newVal) => {
		console.log('currentPath changed:', newVal) // 添加监听验证
	})
	const handleSwitch = (path, index) => {
		if (path !== props.currentPath) {
			emits('onTab', path);
		}
	};
</script>

<style lang="scss" scoped>
	.tab-bar {
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS 11.2以下版本 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 标准写法 */
		padding-bottom: 20rpx;
		/* 默认值确保兼容性 */
		padding-top: 20rpx;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.06);
		border-radius: 30rpx 30rpx 0px 0px;
		z-index: 2;
		
		.tab-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.tab-icon {
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 8rpx;
			}

			.tab-text {
				font-size: 20rpx;
				color: #666;
			}
		}
	}
</style>